<template>
  <a-modal v-model="visible" title="编辑选项卡数据" @ok="handleOk" class="edit-tabs">
     <!-- <a-form-item v-for="item in selectedComponent.props.list" :key="item.label"
      label="名称"
      :prop="item.fieldName"
      :class="item.extraConfig.className"
      >
      <a-input v-model="form[item.fieldName]" :placeholder="inputPlaceholder" />
     </a-form-item> -->
    <a-form-model ref="formRef" :model="dynamicValidateForm">
      <Draggable v-model="dynamicValidateForm.list" @update="handleChange">
        <div
          v-for="(k, index) in dynamicValidateForm.list"
          :key="index"
          class="item"
          >
          <a-form-model-item
            label="名称"
            :prop="`list.${index}.label`"
            :rules="{ required: true, message: '名称不能为空', trigger: 'blur' }"
          >
            <a-input
              v-model.trim="k.label"
              placeholder="请输入"
            />
            <a-icon
              class="dynamic-delete-button"
              type="minus-circle-o"
              @click="() => remove(k)"
            />
          </a-form-model-item>
        </div>

      </Draggable>

      <a-form-model-item>
        <a-button type="dashed" @click="add">
          <a-icon type="plus" /> 添加
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script >
import { mapState } from "vuex"
import Draggable from "vuedraggable"
import { message } from "ant-design-vue"
import { deepCopy } from "../../../../lib/utils"
import EventBus from "../../../../EventBus"

export default {
  data() {
    return {
      visible: false,
      dynamicValidateForm: {
        list: this.$store.state.lowCode.selectedComponent.props.list
      }

    }
  },
  computed: {
    ...mapState("lowCode", {
      selectedComponent: state => state.selectedComponent,
    }),

  },
  // beforeCreate() {
  //   this.form = this.$form.createForm(this, { name: 'edit-tab' })
  // },
  methods: {
    show(){
      this.visible = true
    },
    handleOk(){
      // this.form.validateFields()
      // .then(values => {
      //   console.log(values)

      // })
      this.$refs.formRef.validate(valid => {
        console.log(valid)
        if (valid) {
          this.selectedComponent.props = {
              ...this.selectedComponent.props,
              list: this.dynamicValidateForm.list.map(item => ({
                  ...item,
                  value: item.label
                }))
            }
          this.$store.commit("lowCode/setSelectedComponent", this.selectedComponent)
          message.success("修改成功")
          this.visible = false
          EventBus.$emit("setSelectComponentUpdateList", {})

        } else {
          console.log("error submit!!")
          return false
        }
      })

    },
    add(){
      const label = `新标签${this.dynamicValidateForm.list.length}`
      this.dynamicValidateForm.list.push({
        label,
        value: label,
        children: []
      })

    },
    remove(k){
      const {
        list
      } = this.dynamicValidateForm
      const index = list.findIndex(item => item.label === k.label)
      list.splice(index, 1)
      this.dynamicValidateForm = {
        list
      }
    },
    handleChange(data){
      console.log(this.dynamicValidateForm.list)
      // this.list = deepCopy([...data])
    },

  },
  components: {
    Draggable
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
